<template>
  <div class="user-list-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">
          <el-icon class="title-icon">
            <UserFilled />
          </el-icon>
          用户列表
        </h2>
        <p class="page-description">管理系统中的所有用户账户和权限</p>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="addUser" class="add-user-btn">
          <el-icon>
            <Plus />
          </el-icon>
          添加用户
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-filter-section">
      <div class="search-box">
        <el-input v-model="searchKeyword" placeholder="搜索用户名或姓名..." clearable @input="handleSearch"
          class="search-input">
          <template #prefix>
            <el-icon>
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>
      <div class="filter-box">
        <el-select v-model="roleFilter" placeholder="角色筛选" clearable class="filter-select">
          <el-option label="全部角色" value="" />
          <el-option label="超级管理员" value="超级管理员" />
          <el-option label="管理员" value="管理员" />
          <el-option label="普通用户" value="普通用户" />
        </el-select>
        <el-select v-model="statusFilter" placeholder="状态筛选" clearable class="filter-select">
          <el-option label="全部状态" value="" />
          <el-option v-for="(item, index) in statusFilterItems" :key="index" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="info" @click="resetFilters" class="reset-btn">
          <el-icon>
            <Refresh />
          </el-icon>
          重置
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon total">
          <el-icon>
            <User />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ totalUsers }}</div>
          <div class="stat-label">总用户数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon active">
          <el-icon>
            <UserFilled />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ activeUsers }}</div>
          <div class="stat-label">活跃用户</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon locked">
          <el-icon>
            <Lock />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ lockedUsers }}</div>
          <div class="stat-label">锁定用户</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon admin">
          <el-icon>
            <Setting />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ adminUsers }}</div>
          <div class="stat-label">管理员</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon deleted">
          <el-icon>
            <Delete />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ deletedUsers }}</div>
          <div class="stat-label">已删除用户</div>
        </div>
      </div>
    </div>

    <!-- 表格容器 -->
    <div class="table-container">
      <el-table :data="filteredUsers" style="width: 100%" border
        :header-cell-style="{ background: '#f8f9fa', color: '#495057', fontWeight: '600' }"
        :cell-style="{ padding: '16px 12px' }" class="user-table" table-layout="auto" v-loading="loading"
        element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)">
        <el-table-column prop="username" label="用户名" min-width="180" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="username-cell">
              <span class="username-text">{{ row.account }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="roleName" label="角色" min-width="176" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag :type="getRoleTagType(row.roleName)" size="small" class="role-tag">
              {{ row.roleName || '未分配' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="邮箱" min-width="176" show-overflow-tooltip>
          <template #default="{ row }">
            <span class="name-text">{{ row.email }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" min-width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.userStatus)" size="small" class="status-tag">
              {{ getStatusText(row.userStatus) }}
            </el-tag>
          </template>
        </el-table-column>



        <el-table-column label="操作" min-width="200" align="center" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="primary" size="small" @click="editUser(row)" icon="Edit" class="action-btn edit-btn"
                :disabled="row.userStatus === 3">
                编辑
              </el-button>
              <el-button type="success" size="small" @click="viewUser(row)" icon="View" class="action-btn view-btn">
                查看
              </el-button>
              <el-button v-if="row.userStatus === 3" type="warning" size="small" @click="restoreUser(row)"
                icon="Refresh" class="action-btn restore-btn">
                恢复
              </el-button>
              <el-button v-else type="danger" size="small" @click="deleteUser(row)"
                :disabled="!isUserActive(row.userStatus)" icon="Delete" class="action-btn delete-btn">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
          :total="totalUsers" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" class="pagination" />
      </div>
    </div>

    <!-- 编辑/添加用户对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" @close="resetForm" 
      :append-to-body="true" :modal-append-to-body="true" class="user-dialog">
      <el-form :model="userForm" :rules="formRules" ref="userFormRef" label-width="100px">
        <el-form-item label="用户名" prop="account">
          <el-input v-model="userForm.account" :disabled="isEdit" />
        </el-form-item>
        <!-- <el-form-item v-if="isEdit" label="姓名" prop="name">
          <el-input v-model="userForm.name" />
        </el-form-item> -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email" />
        </el-form-item>
        <!-- <el-form-item v-if="isEdit" label="角色" prop="role">
          <el-select v-model="userForm.role" placeholder="请选择角色">
            <el-option label="超级管理员" value="超级管理员" />
            <el-option label="财务人员" value="财务人员" />
            <el-option label="销售人员" value="销售人员" />
          </el-select>
        </el-form-item> -->
        <el-form-item v-if="!isEdit" label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item v-if="!isEdit" label="确认密码" prop="confirmPassword">
          <el-input v-model="userForm.confirmPassword" type="password" placeholder="请再次输入密码" />
        </el-form-item>
        <el-form-item v-if="isEdit" label="重置密码">
          <div class="password-reset-section">
            <el-button 
              type="warning" 
              size="small" 
              @click="togglePasswordReset" 
              :class="{ 'is-active': userForm.shouldResetPassword }"
              class="reset-password-btn"
            >
              <el-icon>
                <Refresh />
              </el-icon>
              {{ userForm.shouldResetPassword ? '已选择重置密码' : '重置为默认密码' }}
            </el-button>
            <span v-if="userForm.shouldResetPassword" class="password-hint">
              默认密码：1234qwer
            </span>
          </div>
        </el-form-item>
        <el-form-item v-if="isEdit" label="用户状态" prop="userStatus">
          <el-select v-model="userForm.userStatus" placeholder="请选择状态">
            <el-option label="正常" :value="0" />
            <el-option label="已锁定" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUser" :loading="saving">
          {{ saving ? '保存中...' : '保存' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 查看用户详情对话框 -->
    <el-dialog v-model="viewDialogVisible" title="用户详情" width="600px" 
      :append-to-body="true" :modal-append-to-body="true" class="user-dialog">
      <div class="user-detail-container">
        <div class="user-detail-header">
          <el-avatar :size="80" :src="currentUser?.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
          <div class="user-detail-info">
            <h3 class="user-name">{{ currentUser?.name || currentUser?.account }}</h3>
            <p class="user-account">@{{ currentUser?.account }}</p>
          </div>
        </div>
        
        <div class="user-detail-content">
          <div class="detail-item">
            <span class="detail-label">用户ID：</span>
            <span class="detail-value">{{ currentUser?.userId || currentUser?.id }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">用户名：</span>
            <span class="detail-value">{{ currentUser?.account }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">用户姓名：</span>
            <span class="detail-value">{{ currentUser?.userInfo?.name || '未设置' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">性别：</span>
            <span class="detail-value">
              <el-tag v-if="currentUser?.userInfo?.gender" :type="currentUser.userInfo.gender === 'Male' ? 'primary' : 'success'" size="small">
                {{ currentUser.userInfo.gender === 'Male' ? '男' : '女' }}
              </el-tag>
              <span v-else class="no-data">未设置</span>
            </span>
          </div>
          <div class="detail-item">
            <span class="detail-label">年龄：</span>
            <span class="detail-value">{{ currentUser?.userInfo?.age || '未设置' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">电话：</span>
            <span class="detail-value">{{ currentUser?.userInfo?.phone || '未设置' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">地址：</span>
            <span class="detail-value">{{ currentUser?.userInfo?.address || '未设置' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">邮箱：</span>
            <span class="detail-value">{{ currentUser?.email }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">角色：</span>
            <span class="detail-value">
              <el-tag :type="getRoleTagType(currentUser?.roleName || currentUser?.role)" size="small">
                {{ currentUser?.roleName || currentUser?.role || '未分配' }}
              </el-tag>
            </span>
          </div>
          <div class="detail-item">
            <span class="detail-label">状态：</span>
            <span class="detail-value">
              <el-tag :type="getStatusTagType(currentUser?.status || currentUser?.userStatus)" size="small">
                {{ getStatusText(currentUser?.status || currentUser?.userStatus) }}
              </el-tag>
            </span>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="editFromView" :disabled="currentUser?.userStatus === 3">
            修改用户
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { User, UserFilled, Plus, Search, Refresh, Lock, Setting, Edit, View, Delete } from '@element-plus/icons-vue';
import { userApi } from '@/api';

export default {
  components: {
    User, UserFilled, Plus, Search, Refresh, Lock, Setting, Edit, View, Delete
  },
  setup() {
    const router = useRouter();

    // 响应式数据
    const loading = ref(false);
    const dialogVisible = ref(false);
    const searchKeyword = ref('');
    const roleFilter = ref('');
    const statusFilter = ref('');
    const currentPage = ref(1);
    const pageSize = ref(20);
    const users = ref([]);
    const statusFilterItems = ref([
      { label: "正常", value: "0" },
      { label: "已锁定", value: "1" },
      { label: "已登出", value: "2" },
      { label: "已删除", value: "3" }
    ]);
    const isEdit = ref(false);
    const saving = ref(false);
    const resettingPassword = ref(false);
    const viewDialogVisible = ref(false);
    const currentUser = ref(null);
    const userForm = ref({
      id: null,
      account: '',
      name: '',
      email: '',
      role: '',
      password: '',
      confirmPassword: '',
      userStatus: 0,
      shouldResetPassword: false
    });
    const userFormRef = ref(null);

    // 计算属性
    const dialogTitle = computed(() => isEdit.value ? '编辑用户' : '添加用户');
    
    const formRules = computed(() => {
      const base = {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '用户名长度在3-20个字符之间', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ]
      };
      
      if (!isEdit.value) {
        base.password = [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在6-20个字符之间', trigger: 'blur' }
        ];
        base.confirmPassword = [
          { required: true, message: '请确认密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== userForm.value.password) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ];
      }
      
      if (isEdit.value) {
        base.name = [{ required: true, message: '请输入姓名', trigger: 'blur' }];
        base.role = [{ required: true, message: '请选择角色', trigger: 'change' }];
        base.userStatus = [{ required: true, message: '请选择用户状态', trigger: 'change' }];
      }
      
      return base;
    });

    const filteredUsers = computed(() => {
      let filtered = users.value;
      
      if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase();
        filtered = filtered.filter(user =>
          (user.account && user.account.toLowerCase().includes(keyword)) ||
          (user.name && user.name.toLowerCase().includes(keyword)) ||
          (user.email && user.email.toLowerCase().includes(keyword))
        );
      }

      if (roleFilter.value) {
        filtered = filtered.filter(user => user.roleName === roleFilter.value);
      }

      if (statusFilter.value) {
        filtered = filtered.filter(user => user.userStatus === parseInt(statusFilter.value));
      }

      return filtered;
    });

    // 统计数据
    const totalUsers = computed(() => users.value.filter(user => user.userStatus !== 3).length);
    const activeUsers = computed(() => users.value.filter(user => isUserActive(user.userStatus)).length);
    const lockedUsers = computed(() => users.value.filter(user => user.userStatus === 1).length);
    const deletedUsers = computed(() => users.value.filter(user => user.userStatus === 3).length);
    const adminUsers = computed(() => users.value.filter(user => user.roleName === '超级管理员' || user.roleName === '管理员').length);

    // 工具方法
    const getStatusText = (statusCode) => {
      const statusTexts = { 0: '正常', 1: '已锁定', 2: '已登出', 3: '已删除' };
      return statusTexts[statusCode] || '未知状态';
    };

    const getStatusTagType = (statusCode) => {
      const statusTypes = { 0: 'success', 1: 'danger', 2: 'warning', 3: 'info' };
      return statusTypes[statusCode] || 'info';
    };

    const isUserActive = (statusCode) => statusCode === 0;

    const canDeleteUser = (statusCode) => statusCode !== 3;

    const getRoleTagType = (role) => {
      const roleTypes = {
        '超级管理员': 'danger', // 红色
        '管理员': 'warning', // 黄色
        '普通用户': '' // 灰色（默认）
      };
      return roleTypes[role] || ''; // 默认灰色
    };

    // 数据加载
    const loadUsers = async () => {
      try {
        loading.value = true;
        const response = await userApi.getUsers();
        users.value = response.data;
      } catch (error) {
        if (error.response?.status === 401) {
          // 401错误由拦截器统一处理
        } else {
          ElMessage.error('加载用户数据失败：' + (error.response?.data?.message || error.message));
        }
      } finally {
        loading.value = false;
      }
    };

    // 表单操作
    const resetForm = () => {
      userForm.value = {
        id: null,
        account: '',
        name: '',
        email: '',
        role: '',
        password: '',
        confirmPassword: '',
        userStatus: 0,
        shouldResetPassword: false
      };
      isEdit.value = false;
      if (userFormRef.value) userFormRef.value.clearValidate();
    };

    const addUser = () => {
      resetForm();
      isEdit.value = false;
      dialogVisible.value = true;
    };

    const editUser = (user) => {
      resetForm();
      isEdit.value = true;
      userForm.value = {
        id: user.id,
        account: user.account,
        name: user.name,
        email: user.email,
        role: user.roleName,
        userStatus: parseInt(user.userStatus),
        password: '',
        confirmPassword: '',
        shouldResetPassword: false
      };
      dialogVisible.value = true;
    };

    const togglePasswordReset = () => {
      userForm.value.shouldResetPassword = !userForm.value.shouldResetPassword;
      if (userForm.value.shouldResetPassword) {
        ElMessage.info('已选择重置密码，保存时将设置默认密码：1234qwer');
      } else {
        ElMessage.info('已取消重置密码');
      }
    };

    const saveUser = async () => {
      try {
        await userFormRef.value.validate();
        saving.value = true;
        
        if (isEdit.value) {
          const updateData = {
            account: userForm.value.account,
            email: userForm.value.email,
            statusCode: parseInt(userForm.value.userStatus)
          };
          
          if (userForm.value.shouldResetPassword) {
            updateData.password = '1234qwer';
          }
          

          
          await userApi.updateUser(userForm.value.id, updateData);
          ElMessage.success('用户更新成功');
          
          // 直接更新本地数据，保持顺序
          const index = users.value.findIndex(u => u.id === userForm.value.id);
          if (index > -1) {
            users.value[index] = {
              ...users.value[index],
              account: userForm.value.account,
              email: userForm.value.email,
              userStatus: userForm.value.userStatus,
              roleName: userForm.value.role
            };
          }
        } else {
          const createData = {
            account: userForm.value.account,
            email: userForm.value.email,
            password: userForm.value.password
          };
          await userApi.createUser(createData);
          ElMessage.success('用户添加成功');
          loadUsers(); // 创建用户需要重新加载列表
        }
        
        dialogVisible.value = false;
      } catch (error) {
        if (error !== false) {
          ElMessage.error('保存用户失败：' + (error.response?.data?.message || error.message));
        }
      } finally {
        saving.value = false;
      }
    };

    // 用户操作
    const viewUser = async (user) => {
      currentUser.value = user;
      viewDialogVisible.value = true;
      console.log('原始用户数据:', currentUser.value);
      try {
        const response = await userApi.getUser(user.id);
        console.log('API返回的用户详情:', response);
        
        // 根据后端UserDetailDto结构处理数据
        if (response && response.data) {
          const userDetail = response.data;
          console.log('解析的用户详情:', userDetail);
          
          currentUser.value = {
            ...currentUser.value,
            userId: userDetail.userId,
            account: userDetail.account,
            email: userDetail.email,
            status: userDetail.status,
            userInfo: userDetail.userInfo,
            role: userDetail.role || currentUser.value.roleName // 保持角色信息
          };
          console.log('更新后的用户数据:', currentUser.value);
        } else {
          console.log('API返回数据格式异常:', response);
        }
      } catch (error) {
        console.error('获取用户详情失败:', error);
        ElMessage.error('获取用户详情失败');
      }
    };

    const editFromView = () => {
      if (currentUser.value) {
        viewDialogVisible.value = false;
        editUser(currentUser.value);
      }
    };

    const deleteUser = async (user) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除用户 "${user.name || user.account}" 吗？此操作不可恢复。`,
          '确认删除',
          { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
        );

        await userApi.deleteUser(user.id);
        
        const index = users.value.findIndex(u => u.id === user.id);
        if (index > -1) {
          users.value[index].userStatus = 3;
        }

        ElMessage.success('用户删除成功');
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除用户失败：' + (error.response?.data?.message || error.message));
        }
      }
    };

    const restoreUser = async (user) => {
      try {
        await ElMessageBox.confirm(
          `确定要恢复用户 "${user.name || user.account}" 吗？`,
          '确认恢复',
          { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
        );

        await userApi.restoreUser(user.id);
        
        const index = users.value.findIndex(u => u.id === user.id);
        if (index > -1) {
          users.value[index].userStatus = 0;
        }

        ElMessage.success('用户恢复成功');
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('恢复用户失败：' + (error.response?.data?.message || error.message));
        }
      }
    };

    // 筛选和分页
    const handleSearch = () => {
      // 搜索逻辑已通过计算属性实现
    };

    const resetFilters = () => {
      searchKeyword.value = '';
      roleFilter.value = '';
      statusFilter.value = '';
      currentPage.value = 1;
    };

    const handleSizeChange = (val) => {
      pageSize.value = val;
      currentPage.value = 1;
    };

    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };

    // 生命周期
    onMounted(() => {
      loadUsers();
    });

    return {
      loading,
      searchKeyword,
      roleFilter,
      statusFilter,
      currentPage,
      pageSize,
      users,
      filteredUsers,
      totalUsers,
      activeUsers,
      lockedUsers,
      deletedUsers,
      adminUsers,
      dialogVisible,
      userForm,
      formRules,
      userFormRef,
      statusFilterItems,
      getRoleTagType,
      handleSearch,
      resetFilters,
      addUser,
      editUser,
      saveUser,
      resetForm,
      viewUser,
      deleteUser,
      restoreUser,
      handleSizeChange,
      handleCurrentChange,
      canDeleteUser,
      isUserActive,
      getStatusText,
      getStatusTagType,
      isEdit,
      saving,
      dialogTitle,
      resettingPassword,
      togglePasswordReset,
      viewDialogVisible,
      currentUser,
      editFromView,
    };
  },
};
</script>

<style scoped>
.user-list-container {
  width: 100%;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  background: #f5f7fa;
  margin: 0;
  overflow-y: auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.header-left {
  flex: 1;
  margin-right: 20px;
}

.header-right {
  flex-shrink: 0;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  color: #303133;
  margin: 0 0 5px 0;
}

.title-icon {
  margin-right: 8px;
  font-size: 1.8rem;
  color: #409eff;
}

.page-description {
  font-size: 0.9rem;
  color: #606266;
  margin: 0;
}

.add-user-btn {
  height: 40px;
  padding: 0 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  gap: 15px;
}

.search-box {
  flex: 1;
  min-width: 300px;
}

.search-input {
  width: 100%;
}

.filter-box {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.filter-select {
  width: 120px;
}

.reset-btn {
  height: 40px;
  padding: 0 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  background: #f8f9fa;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  font-size: 2.5rem;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(64, 158, 255, 0.1);
}

.stat-icon.total {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

.stat-icon.active {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.stat-icon.locked {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

.stat-icon.admin {
  color: #909399;
  background: rgba(144, 147, 153, 0.1);
}

.stat-icon.deleted {
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.1);
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.8rem;
  color: #909399;
  margin: 0;
}

.table-container {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px 20px;
  min-height: 300px;
}

.user-table {
  width: 100%;
  flex: 1;
}

.user-table :deep(.el-table__header-wrapper) {
  background: #f5f7fa;
}

.user-table :deep(.el-table__body-wrapper) {
  overflow: auto;
  min-height: 300px;
}

.user-table :deep(.el-table__row) {
  transition: background-color 0.3s ease;
}

.user-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

.username-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  flex-shrink: 0;
}

.username-text {
  font-weight: 500;
  color: #303133;
  font-size: 0.9rem;
}

.name-text {
  font-weight: 500;
  color: #303133;
  font-size: 0.9rem;
}



.role-tag {
  font-weight: 500;
}

.status-tag {
  font-weight: 500;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.action-btn {
  margin: 0 1px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-btn.edit-btn {
  background-color: #409eff;
  border-color: #409eff;
}

.action-btn.view-btn {
  background-color: #67c23a;
  border-color: #67c23a;
}

.action-btn.delete-btn {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.action-btn.restore-btn {
  background-color: #e6a23c;
  border-color: #e6a23c;
}

/* 确保表格完整显示 */
.user-table :deep(.el-table) {
  width: 100% !important;
  height: auto !important;
  display: table !important;
  table-layout: auto !important;
}

.user-table :deep(.el-table__body) {
  width: 100% !important;
  height: auto !important;
}

.user-table :deep(.el-table__header) {
  width: 100% !important;
  height: auto !important;
}

/* 确保表格列宽度正确 */
.user-table :deep(.el-table__column) {
  min-width: 0;
}

/* 确保表格内容不被截断 */
.user-table :deep(.el-table__cell) {
  padding: 12px 8px !important;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* 确保操作按钮正确显示 */
.user-table :deep(.el-button) {
  margin: 2px;
  min-width: 60px;
}

/* 确保标签正确显示 */
.user-table :deep(.el-tag) {
  margin: 0;
  display: inline-block;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .user-list-container {
    padding: 15px;
  }

  .page-header {
    margin-bottom: 15px;
    padding: 15px;
  }

  .search-filter-section {
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .search-box {
    width: 100%;
    min-width: auto;
  }

  .filter-box {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }

  .filter-select {
    width: 120px;
  }

  .stats-cards {
    padding: 15px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .user-table :deep(.el-table__cell) {
    padding: 8px 6px !important;
  }
}

@media (max-width: 768px) {
  .user-list-container {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 15px;
  }

  .add-user-btn {
    width: 100%;
  }

  .search-filter-section {
    padding: 10px;
  }

  .filter-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .filter-select {
    width: 100%;
  }

  .reset-btn {
    width: 100%;
  }

  .stats-cards {
    padding: 10px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .user-table :deep(.el-table__cell) {
    padding: 4px 2px !important;
  }

  .action-btn {
    height: 20px;
    padding: 0 6px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .user-list-container {
    padding: 8px;
  }

  .page-header {
    padding: 12px;
  }

  .search-filter-section {
    padding: 8px;
  }

  .stats-cards {
    padding: 8px;
    grid-template-columns: 1fr;
  }

  .user-table :deep(.el-table__cell) {
    padding: 2px 1px !important;
    font-size: 11px;
  }

  .action-btn {
    height: 18px;
    padding: 0 4px;
    font-size: 9px;
  }
}

/* 缩放支持 */
@media (max-width: 1400px) {
  .user-table :deep(.el-table__cell) {
    padding: 8px 6px !important;
    font-size: 13px;
  }

  .action-btn {
    padding: 0 8px !important;
    font-size: 11px !important;
    height: 24px !important;
  }
}

@media (max-width: 1024px) {
  .user-table :deep(.el-table__cell) {
    padding: 6px 4px !important;
    font-size: 12px;
  }

  .action-btn {
    padding: 0 6px !important;
    font-size: 10px !important;
    height: 22px !important;
  }
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 确保表格在容器中正确显示 */
.user-list-container {
  overflow: visible !important;
  min-height: 100vh !important;
}

.table-container {
  overflow: visible !important;
  height: auto !important;
  flex: 1 !important;
}

/* 确保表格内容不被截断 */
.user-table :deep(.el-table__cell) {
  padding: 16px 12px !important;
  word-break: break-word !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* 确保表格行高度合适 */
.user-table :deep(.el-table__row) {
  height: 60px !important;
  min-height: 60px !important;
}

/* 缩放时的特殊处理 */
@media (max-width: 1600px) {
  .user-table :deep(.el-table__cell) {
    padding: 10px 6px !important;
  }
}

@media (max-width: 1200px) {
  .user-table :deep(.el-table__cell) {
    padding: 8px 4px !important;
  }
}

@media (max-width: 900px) {
  .user-table :deep(.el-table__cell) {
    padding: 6px 3px !important;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .user-list-container {
    padding: 15px;
  }

  .page-header {
    margin-bottom: 15px;
    padding: 12px 16px;
  }

  .search-filter-section {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .search-box {
    width: 100%;
    min-width: auto;
  }

  .filter-box {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }

  .filter-select {
    width: 120px;
  }

  .stats-cards {
    padding: 12px 16px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .user-table :deep(.el-table__cell) {
    padding: 8px 6px !important;
  }
}

@media (max-width: 768px) {
  .user-list-container {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px 16px;
  }

  .add-user-btn {
    width: 100%;
  }

  .search-filter-section {
    padding: 10px 16px;
  }

  .filter-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .filter-select {
    width: 100%;
  }

  .reset-btn {
    width: 100%;
  }

  .stats-cards {
    padding: 10px 16px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .user-table :deep(.el-table__cell) {
    padding: 4px 2px !important;
  }

  .action-btn {
    height: 20px;
    padding: 0 6px;
    font-size: 10px;
  }
}

/* 重置密码按钮样式 */
.password-reset-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reset-password-btn {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.reset-password-btn.is-active {
  background-color: #e6a23c;
  border-color: #e6a23c;
  color: white;
}

.password-hint {
  font-size: 12px;
  color: #e6a23c;
  margin-left: 8px;
  font-weight: 500;
}

/* 用户对话框样式 */
.user-dialog {
  z-index: 2000 !important;
}

.user-dialog :deep(.el-dialog) {
  margin: 5vh auto !important;
  max-height: 90vh;
  overflow-y: auto;
}

.user-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

/* 用户详情样式 */
.user-detail-container {
  padding: 0;
}

.user-detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

.user-detail-info {
  flex: 1;
}

.user-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #303133;
  margin: 0 0 5px 0;
}

.user-account {
  font-size: 0.9rem;
  color: #909399;
  margin: 0;
}

.user-detail-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f7fa;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: 600;
  color: #606266;
  min-width: 100px;
  flex-shrink: 0;
}

.detail-value {
  color: #303133;
  flex: 1;
}

.no-data {
  color: #909399;
  font-style: italic;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 确保对话框在正确位置显示 */
.user-list-container {
  position: relative;
}

/* 响应式对话框 */
@media (max-width: 768px) {
  .user-dialog :deep(.el-dialog) {
    width: 95% !important;
    margin: 2vh auto !important;
  }
  
  .user-detail-header {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .detail-label {
    min-width: auto;
  }
}
</style>